<template>
	<view>
		<linex></linex>
		<view class="address-item">
			<view class="item-title">收货人</view>
			<input class="item-input" type="text" v-model="address.name" placeholder="请输入收货人" placeholder-style="color:#CCCCCC;font-size:25rpx" />
		</view>
		<view class="address-item">
			<view class="item-title">手机号</view>
			<input class="item-input" type="number" v-model="address.tel" placeholder="请输入手机号" placeholder-style="color:#CCCCCC;font-size:25rpx" />
			<!-- #ifndef APP-PLUS -->
			
			<!-- #endif -->
			<button class="get-wxTel iconfont icon-shoujihaobeifen" @getphonenumber="getphonenumberresult" open-type="getPhoneNumber" ></button>
		</view>
		<view class="address-item">
			<view class="item-title">所在地区</view>
			<input :disabled="true" class="item-input" @tap="showMpvuePink" type="text" v-model="address.address" placeholder="请输入收货人"
			 placeholder-style="color:#CCCCCC;font-size:25rpx"></input>
			<button class="get-wxTel iconfont icon-dizhi" @tap="dingwei"></button>
			<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
			 @onConfirm="onConfirm"></mpvue-picker>
		</view>
		<view class="address-item">
			<view class="item-title">详细地址</view>
			<input class="item-input" type="text" v-model="address.detail_address" placeholder="请输入详细地址" placeholder-style="color:#CCCCCC;font-size:25rpx"></input>
		</view>
		<view class="address-item" style="justify-content: space-between;">
			<view class="item-title">设置默认</view>
			<view>
				<switch :checked="address.defualt_true" @change="switch1Change" color="#FD6801" />
			</view>
		</view>
		<view class="main-bg-color padding-y-20"
			  @tap="addAddress(address)"
		 style="width: 95%; color: #FFFFFF;border-radius: 10rpx;margin-top: 30rpx;position: absolute;left: 50%; transform: translateX(-50%); text-align: center;">保存</view>
	</view>
</template>

<script>
	import mpvuePicker from "../../componets/mpvue-citypicker/mpvueCityPicker.vue"
	import {mapMutations} from "vuex"
	export default {
		components: {
			mpvuePicker
		},
		data() {
			return {
				address: {
					tel: "",
					name: "",
					address: "",
					detail_address: "",
					defualt_true: false,
					backType:0
				},
				
				themeColor: '#007AFF',
				deepLength: 1,
				pickerValueDefault: [2, 2, 2]//默认选中的索引，从0开始
			}
		},
		// 监听返回键，先将地址弹框隐藏掉
		onBackPress() {
			if (this.$refs.mpvuePicker.showPicker) {
				this.$refs.mpvuePicker.pickerCancel();
				return true;
			}
		},
		onLoad(option) {
			console.log(option)
			if(option.param){
				this.address.backType=option.param;
			}
		},
		methods: {
			...mapMutations({
				addAddress:"addAddress"
			}),
			// 获取地址 
			dingwei() {
				uni.chooseLocation({
				    success:(res)=> {
				       // 使用正则匹配出省市区
					   var reg = /.+?(省|市|自治区|自治州|县|区)/g;
					   let arr=res.address.match(reg);
					   if(res.name==="地图位置"){
						   this.address.address=arr[0]+"-"+arr[1]+"-"+arr[2]
						   this.address.detail_address=arr[3];
					   }else{
						   console.log(res)
						   console.log(arr)
						   if(arr!=null){
							   this.address.address=arr.join("-")
						   }
						   this.address.detail_address=res.name;
					   }
						
						
						
				    }
				});
				

			},
			// 城市3联动
			getphonenumberresult(option) {
				this.address.tel = "1888889999"
			},
			switch1Change() {
				this.address.defualt_true = !this.address.defualt_true
			},
			showMpvuePink() {
				this.$refs.mpvuePicker.show()
			},
			onConfirm(e) {
				console.log(e);
				if(this.address.address!=e.label){
					this.address.detail_address=""
				}
				this.address.address = e.label;
			},

		}
	}
</script>

<style lang="less">
	page {
		background-color: #F1F1F1;
	}

	.address-item {
		padding: 30rpx 20rpx;
		border-top: 1rpx solid #F1F1F1;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;

		.item-title {
			font-size: 30rpx;
			width: 150rpx;
		}

		.item-input {
			flex: 1;
			font-size: 30rpx;
			color: #CCCCCC;
		}
	}

	.get-wxTel {
		font-size: 35rpx;
		padding: 10rpx;
		line-height: 1;
		padding-left: 10rpx;
		padding-right: 10rpx;
		color: #FD6801;
		border: 0rpx !important;

	}
</style>
